function addScript(url){
	document.write("<script language=javascript src="+url+"></script>");
}

addScript('./Watcher.js')

class Compile{
    constructor(el,vue){
       //用$是用户都可以用它
       //vue的实例 
       this.$vue=vue
       //挂载点
       this.$el=document.querySelector(el) 
       if(this.$el){
           //调用函数让节点变为 Fragment  实际上用的是AST  这里就是青量级的 Fragment
           let Fragment= this.node2Fragment(this.$el)
           this.compile(Fragment)
           this.$el.appendChild(Fragment)//上树
       }  

    }
    node2Fragment(el){
    //    console.log(el)
       var fragement=document.createDocumentFragment()
       //console.log(fragement)
       var child;
       //让所有的DOM节点都进入 fragement
       while(child=el.firstChild){
           console.log(child)
           fragement.appendChild(child)
       }

       return  fragement

    }

    compile(el){
      //得到子元素
      var childNodes=el.childNodes;
    //   console.log('qqqqq')
    //   console.log(childNodes)
      let self=this
      const reg = /\{\{(.*)\}\}/ // 正则获取 mustache 内容
      childNodes.forEach((node)=>{
           //console.log(node.nodeType) 有标签的是1类型 {{}} 这种的是3类型
           let text=node.textContent
            // console.log('nnnnnnnnnn')
            // console.log(node)
          // console.log(text)
          if(node.nodeType==1){
             self.compileElement(node)
          }else if(node.nodeType==3 && reg.test(text)){
             console.log('文本匹配')
             let name=text.match(reg)[1]
             this.compileText(node,name)
          }


      })
    }
    compileElement(node){
     //这里的方便之处在于不是讲HTML结构看做字符串 而是真正的属性列表
     let nodeAtrrs=node.attributes;
     //console.log(node+'mmmmmm')
      //console.log(nodeAtrrs+'mmmmmm')
     let self=this
     //类数组变成数组 [].slice()也是可以的
     Array.prototype.slice.call(nodeAtrrs).forEach((attr)=>{
         //这里分析指令
        let attrName=attr.name;
        let value=attr.value;
        //指令都是v-开头的 
        //  console.log(attrName+'///mmmmm')
        //  console.log(value+'///mmmmm')
        let dir=attrName.substring(2)
        //console.log(dir)
        //看看是不是指令
        if(attrName.indexOf('v-')==0){
           if(dir=='model'){
               //v-model 本质上做了2件事 
               //1.添加watcher 得到v  显示v  然后添加input事件
               //2.
              //console.log('我发现了model指令'+value)
              new Watcher(self.$vue,value,value=>{
                  node.value=value
              })
              let vv=self.getValue(self.$vue,value)
              node.value=vv
              node.addEventListener('input',e=>{
                  let newValue=e.target.value
                  let val=self.setValue(self.$vue,value,newValue)
                  vv=newValue
              })


           }else if(dir=='for'){

           }else if(dir=='if'){

           }
           //下面还有
        }

     })


    }
    compileText(node,name){
       console.log(node.textContent+'abb')
       console.log(name+'aaa')
       node.textContent=this.getValue(this.$vue,name)
       //Watcher一加上视图就能更新
       new Watcher(this.$vue,name,value=>{
         node.textContent=value
       })
    }
    getValue(vue,exp){
       let val=vue
       exp=exp.split('.')
       exp.forEach((k)=>{
           val=val[k]
       })
       return val
    }

    setValue(vue,exp,value){
        let val=vue
        exp=exp.split('.')
        exp.forEach((k,i)=>{
            if( i< exp.length-1){
                val=val[k]
            }else{
                val[k]=value
            }
          
        })
        
     }

}

